<template>
    <div class="register-wrap">
        <div class="ms-register">
            <div class="ms-title">后台管理系统</div>
            <el-form :model="param" :rules="rules" ref="register" label-width="0px" class="ms-content">
                <!-- 用户名 -->
                <el-form-item prop="username">
                    <el-input v-model="param.username" placeholder="username">
                        <template #prepend>
                            <el-button icon="el-icon-user"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password">
                    <el-input type="password" placeholder="password" v-model="param.password">
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 二次输入密码 -->
                <el-form-item prop="checkPassword">
                    <el-input   type="password" v-model="param.checkPassword" placeholder="checkPassword">
                        <template #prepend>
                            <el-button icon="el-icon-lock"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 邮箱 -->
                <el-form-item prop="email">
                    <el-input type="email" v-model="param.email" placeholder="email">
                        <template #prepend>
                            <el-button icon="el-icon-message"></el-button>
                        </template>
                    </el-input>
                </el-form-item>
                <!-- 验证码 -->
                <!-- <el-form-item prop="vcode">
                    <el-input v-model="param.vcode" placeholder="vcode" @keyup.enter="submitForm()">
                        <template #prepend>
                            <el-button icon="el-icon-picture-outline"></el-button>
                        </template>
                    </el-input> -->
                    <!-- <el-image :src='param.vcode_url' @click="generate_image_code" alt=""
                        style="width: 100px;height: 40px;"></el-image> -->
                <!-- </el-form-item> -->

                <div class="register-btn">
                    <el-button type="primary" @click="submitForm()">注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
    import {
        vcodeUuid,
        register
    } from "@/utils/common.js"
    export default {
        data() {
            var checkPassword = (rule, value, callback) => {
                if (value == '' || value == undefined || value == null) {
                    callback(new Error('请再次输入密码'));
                } else {
                    if (value !== this.param.password) {
                        callback(new Error('两次输入密码不一致!'));
                    }
                }
            };
            var email = (rule, value, callback) => {
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if (regEmail.test(value)) {
                    // 合法的邮箱
                    return callback();
                }
                callback(new Error("请输入合法的邮箱"));
            };

            return {
                param: {
                    username: "",
                    password: "",
                    checkPassword: "",
                    email: "",
                    //验证码
                    vcode: "",
                    //验证码接口
                    vcode_url: "",
                    //接口验证码
                    vcodeRe: "",
                    vuuid: "",

                },
                rules: {
                    username: [{
                        required: true,
                        message: "请输入用户名",
                        trigger: "blur"
                    }],
                    password: [{
                        required: true,
                        message: "请输入密码",
                        trigger: "blur"
                    }],
                    checkPassword: [{
                        required: true,
                        validator: checkPassword,
                        message: "再次输入密码",
                        trigger: "blur"
                    }],
                    email: [{
                        required: true,
                        validator: email,
                        message: "请输入邮箱",
                        trigger: "blur"
                    }],
                    vcode: [{
                        required: true,
                        message: "请输入验证码",
                        trigger: "blur"
                    }],
                }
            };
        },
        mounted() {
        
        },
        created() {
            this.$store.commit("clearTags");
        },

        methods: {
            //使用创建唯一uuid
            generateUuid: function() {
                let d = new Date().getTime()
                if (window.performance && typeof window.performance.now === "function") {
                    d += performance.now()
                }
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
                    const r = (d + Math.random() * 16) % 16 | 0
                    d = Math.floor(d / 16)
                    return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16)
                })
            }, 
            //生成一个图片验证码编号,设置img标签src属性
            async generate_image_code() {
                //生成一个编号，唯一
                this.param.vuuid = this.generateUuid()
                //连接后台接口,判断验证码code
                await vcodeUuid(this.param.vuuid, ).then((res) => {
                   console.log(res)
                })        
            },

            async submitForm() {
                        //form表单数据采取json格式传递
                        var registerData = {
                            username: this.param.username,
                            pass: this.param.password,
                            checkPass: this.param.checkPassword,
                            mail: this.param.email,
                    }
                    await register(registerData).then(res => {
                        if ( res == 'register success') {
                            this.$message.success("注册成功");
                            this.$router.push("/login");
                        }else if  (res == 'register Error') {
                            this.$message.error("注册失败");
                            return false;
                        }

                    })

                }
            }
    }
</script>


<style scoped>
    .register-wrap {
        position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../assets/img/login-bg.jpg);
        background-size: 100%;
    }

    .ms-title {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        color: #fff;
        border-bottom: 1px solid #ddd;
    }

    .ms-register {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 350px;
        margin: -190px 0 0 -175px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.3);
        overflow: hidden;
    }

    .ms-content {
        padding: 30px 30px;
    }

    .register-btn {
        text-align: center;
    }

    .register-btn button {
        width: 100%;
        height: 36px;
        margin-bottom: 10px;
    }

    .register-tips {
        font-size: 12px;
        line-height: 30px;
        color: #fff;
    }
</style>